<template>
  <div class="tag-cloud-container">
    <canvas :id="'tagCanvas_' + uid" :width="width" :height="height"></canvas>
    <div style="display: none">
      <ul :id="'tagList_' + uid">
        <li v-for="(word, index) in words" :key="index">
          <a href="#" :style="{ fontSize: word.weight + 'px', color: 'white' }">
            {{ word.text }}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cloudBall',
  props: {
    words: {
      type: Array,
      required: true
    },
    width: {
      type: [Number, String],
      default: 178
    },
    height: {
      type: [Number, String],
      default: 120
    },
    someOtherData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      uid: Math.random().toString(36).substr(2, 9)
    }
  },
  watch: {
    words() {
      this.reInit()
    },
    someOtherData() {
      this.reInit()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initTagCloud()
      this.$emit('component-ready')
    })
  },
  methods: {
    initTagCloud() {
      try {
        window.TagCanvas.Start(
          'tagCanvas_' + this.uid,
          'tagList_' + this.uid,
          {
            textColour: '#fff',
            outlineColour: '#0000',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05,
            weight: true,
            shuffleTags: true,
            wheelZoom: false,
            noSelect: true
          }
        )
      } catch (e) {
        console.error('TagCanvas error:', e)
      }
    },
    reInit() {
      this.$nextTick(() => {
        this.initTagCloud()
      })
    }
  }
}
</script>

<style scoped>
.tag-cloud-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
